import { Progress } from 'antd'
import React, { useEffect, useState } from 'react'
import { useRecoilValue } from 'recoil'
import styles from '../../index.module.less'
import { getByType } from '../../service'
import { isNullArray, isNullData } from '@/utils'
import { dictValues } from '@/store/dicts'

export default () => {
  const dicts = useRecoilValue(dictValues)
  const [pageData, setPageData] = useState<any[]>([])
  // 请求接口拿数据         hospital_type
  const getData = async () => {
    const res = await getByType({})
    if (isNullData(res) && res.data && isNullArray(res.data.typeDataList)) {
      setPageData(res.data.typeDataList)
    }
    console.log('res🚀🚀🚀🚀', res)
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <>
      <div className={styles.title}>医院类别分布</div>
      {isNullArray(pageData) &&
        pageData.map((item) => (
          <React.Fragment key={item.hospitalType}>
            <div className={styles.txt}>
              {dicts.hospital_type.find((val) => val.value === item.hospitalType)?.label}
            </div>
            <Progress
              style={{ marginBottom: '10px' }}
              format={(percent) => `${percent}%`}
              percent={item.typePercentage ? item.typePercentage * 100 : 0}
              strokeColor='#5584FF'
              trailColor='#F1F8FF'
            />
          </React.Fragment>
        ))}
    </>
  )
}
